<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SessionBox 设置</title>
  <link rel="stylesheet" href="options.css">
</head>
<body>
  <div class="container">
    <!-- Header -->
    <header class="header">
      <div class="header-content">
        <div class="logo">
          <img src="../assets/icons/icon48.png" alt="SessionBox" class="logo-icon">
          <div>
            <h1>SessionBox 设置</h1>
            <p>管理您的会话并配置高级选项</p>
          </div>
        </div>
        <div class="header-actions">
          <button class="btn secondary" id="importBtn">导入会话</button>
          <button class="btn secondary" id="exportBtn">导出会话</button>
          <button class="btn primary" id="saveBtn">保存设置</button>
        </div>
      </div>
    </header>

    <!-- Navigation -->
    <nav class="nav-tabs">
      <button class="nav-tab active" data-tab="general">常规</button>
      <button class="nav-tab" data-tab="sessions">会话</button>
      <button class="nav-tab" data-tab="proxy">代理</button>
      <button class="nav-tab" data-tab="fingerprint">指纹保护</button>
      <button class="nav-tab" data-tab="advanced">高级</button>
    </nav>

    <!-- Content -->
    <main class="content">
      <!-- General Tab -->
      <div class="tab-content active" id="general">
        <div class="section">
          <h2>常规设置</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="autoSwitchSession">
                <span class="checkmark"></span>
                打开新标签页时自动切换会话
              </label>
              <p class="setting-description">
                在新标签页中打开链接时自动切换到相应的会话
              </p>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="showSessionIndicator">
                <span class="checkmark"></span>
                在标签页中显示会话指示器
              </label>
              <p class="setting-description">
                在标签页标题中显示彩色指示器以显示其所属的会话
              </p>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="enableNotifications">
                <span class="checkmark"></span>
                启用通知
              </label>
              <p class="setting-description">
                在切换会话或代理连接失败时显示通知
              </p>
            </div>
          </div>
        </div>

        <div class="section">
          <h2>默认会话设置</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label for="defaultSessionName">默认会话名称模式</label>
              <input type="text" id="defaultSessionName" placeholder="会话 {number}" value="会话 {number}">
              <p class="setting-description">
                新会话的命名模式。使用 {number} 表示自动递增数字，{date} 表示当前日期
              </p>
            </div>
            
            <div class="setting-item">
              <label for="defaultFingerprintProtection">默认指纹保护</label>
              <select id="defaultFingerprintProtection">
                <option value="disabled">禁用</option>
                <option value="basic">基础保护</option>
                <option value="advanced">高级保护</option>
              </select>
              <p class="setting-description">
                新会话的默认指纹保护级别
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Sessions Tab -->
      <div class="tab-content" id="sessions">
        <div class="section">
          <div class="section-header">
            <h2>会话管理</h2>
            <button class="btn primary" id="newSessionBtn">新建会话</button>
          </div>
          
          <div class="sessions-grid" id="sessionsGrid">
            <!-- Sessions will be populated here -->
          </div>
        </div>
      </div>

      <!-- Proxy Tab -->
      <div class="tab-content" id="proxy">
        <div class="section">
          <h2>代理设置</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="enableGlobalProxy">
                <span class="checkmark"></span>
                为所有会话启用全局代理
              </label>
              <p class="setting-description">
                默认将代理设置应用到所有会话
              </p>
            </div>
            
            <div class="proxy-list" id="proxyList">
              <h3>已保存的代理配置</h3>
              <div class="proxy-items" id="proxyItems">
                <!-- Proxy items will be populated here -->
              </div>
              <button class="btn secondary" id="addProxyBtn">添加代理</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Fingerprint Tab -->
      <div class="tab-content" id="fingerprint">
        <div class="section">
          <h2>指纹保护</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="protectCanvas">
                <span class="checkmark"></span>
                Canvas 指纹保护
              </label>
              <p class="setting-description">
                为 Canvas 渲染添加噪声以防止指纹识别
              </p>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="protectWebGL">
                <span class="checkmark"></span>
                WebGL 指纹保护
              </label>
              <p class="setting-description">
                修改 WebGL 参数以防止 GPU 指纹识别
              </p>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="protectAudio">
                <span class="checkmark"></span>
                音频指纹保护
              </label>
              <p class="setting-description">
                为音频上下文添加噪声以防止音频指纹识别
              </p>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="blockWebRTC">
                <span class="checkmark"></span>
                阻止 WebRTC IP 泄露
              </label>
              <p class="setting-description">
                防止 WebRTC 泄露您的真实 IP 地址
              </p>
            </div>
          </div>
        </div>

        <div class="section">
          <h2>User Agent Settings</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label for="userAgentMode">User Agent Mode</label>
              <select id="userAgentMode">
                <option value="default">Use Browser Default</option>
                <option value="random">Random User Agent</option>
                <option value="custom">Custom User Agent</option>
              </select>
            </div>
            
            <div class="setting-item" id="customUserAgentGroup" style="display: none;">
              <label for="customUserAgent">Custom User Agent</label>
              <textarea id="customUserAgent" rows="3" placeholder="Enter custom user agent string"></textarea>
            </div>
          </div>
        </div>
      </div>

      <!-- Advanced Tab -->
      <div class="tab-content" id="advanced">
        <div class="section">
          <h2>Advanced Settings</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label for="maxSessions">Maximum number of sessions</label>
              <input type="number" id="maxSessions" min="1" max="50" value="10">
              <p class="setting-description">
                Limit the total number of sessions that can be created
              </p>
            </div>
            
            <div class="setting-item">
              <label for="sessionTimeout">Session timeout (minutes)</label>
              <input type="number" id="sessionTimeout" min="0" value="0">
              <p class="setting-description">
                Automatically close inactive sessions after this time (0 = disabled)
              </p>
            </div>
            
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="enableDebugMode">
                <span class="checkmark"></span>
                Enable debug mode
              </label>
              <p class="setting-description">
                Show additional debug information in the console
              </p>
            </div>
          </div>
        </div>

        <div class="section">
          <h2>Data Management</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="clearDataOnClose">
                <span class="checkmark"></span>
                Clear session data when closing
              </label>
              <p class="setting-description">
                Automatically clear cookies and storage when a session is closed
              </p>
            </div>
            
            <div class="setting-item">
              <button class="btn danger" id="clearAllDataBtn">Clear All Session Data</button>
              <p class="setting-description">
                Remove all stored session data, cookies, and settings (cannot be undone)
              </p>
            </div>
          </div>
        </div>

        <div class="section">
          <h2>Backup & Restore</h2>
          <div class="setting-group">
            <div class="setting-item">
              <label class="setting-label">
                <input type="checkbox" id="autoBackup">
                <span class="checkmark"></span>
                Enable automatic backups
              </label>
              <p class="setting-description">
                Automatically backup session data daily
              </p>
            </div>
            
            <div class="setting-item">
              <div class="button-group">
                <button class="btn secondary" id="createBackupBtn">Create Backup</button>
                <button class="btn secondary" id="restoreBackupBtn">Restore Backup</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- Modals -->
  <div class="modal" id="sessionModal">
    <div class="modal-content large">
      <div class="modal-header">
        <h3 id="sessionModalTitle">Edit Session</h3>
        <button class="modal-close" id="sessionModalClose">&times;</button>
      </div>
      <div class="modal-body">
        <form id="sessionForm">
          <div class="form-columns">
            <div class="form-column">
              <div class="form-group">
                <label for="sessionName">Session Name</label>
                <input type="text" id="sessionNameInput" required>
              </div>
              
              <div class="form-group">
                <label>Color</label>
                <div class="color-picker" id="sessionColorPicker">
                  <!-- Color options will be populated here -->
                </div>
              </div>
              
              <div class="form-group">
                <label>
                  <input type="checkbox" id="sessionFingerprintProtection">
                  Enable Fingerprint Protection
                </label>
              </div>
            </div>
            
            <div class="form-column">
              <div class="form-group">
                <label>
                  <input type="checkbox" id="sessionEnableProxy">
                  Enable Proxy
                </label>
              </div>
              
              <div class="proxy-config" id="sessionProxyConfig" style="display: none;">
                <div class="form-row">
                  <select id="sessionProxyType">
                    <option value="http">HTTP</option>
                    <option value="https">HTTPS</option>
                    <option value="socks4">SOCKS4</option>
                    <option value="socks5">SOCKS5</option>
                  </select>
                  <input type="text" id="sessionProxyHost" placeholder="Host">
                  <input type="number" id="sessionProxyPort" placeholder="Port">
                </div>
                <div class="form-row">
                  <input type="text" id="sessionProxyUsername" placeholder="Username (optional)">
                  <input type="password" id="sessionProxyPassword" placeholder="Password (optional)">
                </div>
              </div>
              
              <div class="form-group">
                <label for="sessionUserAgent">Custom User Agent (optional)</label>
                <textarea id="sessionUserAgent" rows="3" placeholder="Leave empty to use default"></textarea>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn secondary" id="sessionModalCancel">Cancel</button>
        <button type="submit" form="sessionForm" class="btn primary">Save Session</button>
      </div>
    </div>
  </div>

  <div class="modal" id="proxyModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Add Proxy Configuration</h3>
        <button class="modal-close" id="proxyModalClose">&times;</button>
      </div>
      <div class="modal-body">
        <form id="proxyForm">
          <div class="form-group">
            <label for="proxyName">Configuration Name</label>
            <input type="text" id="proxyName" placeholder="My Proxy" required>
          </div>
          
          <div class="form-row">
            <select id="proxyType" required>
              <option value="http">HTTP</option>
              <option value="https">HTTPS</option>
              <option value="socks4">SOCKS4</option>
              <option value="socks5">SOCKS5</option>
            </select>
            <input type="text" id="proxyHost" placeholder="Host" required>
            <input type="number" id="proxyPort" placeholder="Port" required>
          </div>
          
          <div class="form-row">
            <input type="text" id="proxyUsername" placeholder="Username (optional)">
            <input type="password" id="proxyPassword" placeholder="Password (optional)">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn secondary" id="proxyModalCancel">Cancel</button>
        <button type="button" class="btn secondary" id="testProxyBtn">Test Connection</button>
        <button type="submit" form="proxyForm" class="btn primary">Save Proxy</button>
      </div>
    </div>
  </div>

  <script src="options.js"></script>
</body>
</html> 